import React, { useState } from 'react'
import { Button, Table, Image, Space, Switch, Select, Input } from 'antd'
import { useMount, useSize } from 'ahooks'
import { getProList, updateFlag, getCategory, searchPro } from './../../api/pro'
import './index.css'

const { Option } = Select
function SearchList() {
  const size = useSize(document.getElementById('content'))
  // console.log(size)
  const [proList, setProList] = useState([])
  useMount(() => {
    getProList().then(res => {
      setProList(res.data.data)
    })
  })
  const [category, setCategory] = useState([])

  useMount(() => {
    getCategory().then(res => {
      // console.log(res.data.data)
      const arr = []
      res.data.data.forEach(item => {
        arr.push({
          text: item,
          value: item
        })
      })
      setCategory(arr)
    })
  })
  const columns = [
    {
      title: '序号',
      width: '100px',
      align: 'center',
      fixed: 'left',
      render (text, record, index) { return <span>{ (current - 1) * pageSize + index + 1 }</span>}
    },
    {
      title: '产品名称',
      width: '280px',
      align: 'center',
      fixed: 'left',
      dataIndex: 'proname'
    },
    {
      title: '图片',
      width: '120px',
      align: 'center',
      dataIndex: 'img1',
      fixed: 'left',
      render (text) {
        return <Image src = {text} style ={{ width: 90, height: 90 }} />
      }
    },
    {
      title: '分类',
      width: '120px',
      align: 'center',
      dataIndex: 'category',
      filters: category,
      onFilter: (value, record) => record.category.indexOf(value) !== -1
    },
    {
      title: '品牌',
      width: 120,
      align: 'center',
      dataIndex: 'brand'
    },
    {
      title: '原价',
      width: '120px',
      align: 'center',
      dataIndex: 'originprice',
      sorter: (a, b) => a.originprice - b.originprice
    },
    {
      title: '折扣',
      width: '120px',
      align: 'center',
      dataIndex: 'discount',
      sorter: (a, b) => a.discount - b.discount
    },
    {
      title: '销量',
      width: 120,
      align: 'center',
      dataIndex: 'sales',
      sorter: (a, b) => a.sales - b.sales
    },
    {
      title: '库存',
      width: 120,
      align: 'center',
      dataIndex: 'stock',
      sorter: (a, b) => a.stock - b.stock
    },
    {
      title: '是否售卖',
      width: 140,
      align: 'center',
      fixed: 'right',
      dataIndex: 'issale',
      render (text, record) {
        return <Switch 
        className="saleSwitch" 
        checked = { text === 1 }
        onChange = { (checked) => {
          updateFlag({
            proid: record.proid,
            type: 'issale',
            flag: checked
          }).then(() => {
            getProList().then(res => {
              setProList(res.data.data)
            })
          })
        }}
        />
      }
    },
    {
      title: '是否秒杀',
      width: 140,
      align: 'center',
      fixed: 'right',
      dataIndex: 'isseckill',
      render (text, record) {
        return <Switch className="seckillSwitch" 
        checked = { text === 1 }
        onChange = { (checked) => {
          updateFlag({
            proid: record.proid,
            type: 'isseckill',
            flag: checked
          }).then(() => {
            getProList().then(res => {
              setProList(res.data.data)
            })
          })
        }}
        />
      }
    },
    {
      title: '是否推荐',
      width: 140,
      align: 'center',
      fixed: 'right',
      dataIndex: 'isrecommend',
      render (text, record) {
        return <Switch className="recommendSwitch" 
        checked = { text === 1 }
        onChange = { (checked) => {
          updateFlag({
            proid: record.proid,
            type: 'isrecommend',
            flag: checked
          }).then(() => {
            getProList().then(res => {
              setProList(res.data.data)
            })
          })
        }}
        />
      }
    },
    {
      title: '操作',
      width: 200,
      align: 'center',
      fixed: 'right',
      render (text, record, index) {
        return (
          <Space>
            <Button type="dashed">编辑</Button>
            <Button type="danger">删除</Button>
          </Space>
        )
      }
    },
  ]
  const [current, setCurrent]=useState(1) // 默认的页数

  const [pageSize, setPageSize]=useState(10) // 默认显示10条数据

  const [ cate, setCate ] = useState('')
  const [ search, setSearch] = useState('')
  return (
    <Space direction="vertical" style={{ width: '100%' }}>
      <div className="searchBox">
        <Space>
          <Select
            showSearch
            allowClear
            value = { cate }
            defaultValue=""
            style={{ width: 200 }}
            placeholder="分类筛选"
            optionFilterProp="children"
            onChange={ (value) => {
              console.log(value)
              if (value === undefined) {
                setCate('')
              } else {
                setCate(value)
                searchPro({
                  category: value,
                  search
                }).then(res => {
                  setProList(res.data.data)
                })
              }
            }}
            onFocus={() => {}}
            onBlur={() => {}}
            filterOption={(input, option) =>
              option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
            }
          >
            <Option value="">全部</Option>
            {
              category.map(item => (
                <Option key = { item.value } value={ item.value }>{ item.value }</Option>
              ))
            }
          </Select>
          <Input value={ search } onChange = {
            (event) => {
              setSearch(event.target.value)
              searchPro({
                category: cate,
                search: event.target.value
              }).then(res => {
                setProList(res.data.data)
              })
            }
          } placeholder="请输入商品的关键词"/>
          <Button type="primary" onClick = { () => {
            searchPro({
              category: cate,
              search
            }).then(res => {
              setProList(res.data.data)
            })
          }}>搜索</Button>
        </Space>
      </div>
      <Table 
        dataSource = { proList } 
        columns = { columns } 
        rowKey="proid" 
        scroll={{ x: 1500, y: size.height - 140 }}
        pagination = { {
          position: ['bottomLeft'], // 分页器出现的位置，可以是多个
          onChange (page, pageSize) {
            setCurrent(page)
            setPageSize(pageSize)
          },
          pageSizeOptions: ['10', '40', '100', '150'],
          showTotal: (total) => {return '共有' + total + '条数据'},
          showQuickJumper: true
        } }
        />
    </Space>
  )
}

export default SearchList
